<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <title>登录</title>
</head>
<body>
<div class="m-padded-tb-large">
  <div class="ui container">
    <div class="ui middle aligned center aligned grid">
      <div class="column" style="max-width: 400px;margin-top: 300px">
        <h2 class="ui teal center aligned header">
          <img class="image" th:src="@{/image/logo.jpg}" src="./static/image/logo.png" /> 登录您的账户
        </h2>
        <form class="ui large form" th:action="@{/admin/login}" method="post">
          <div class="ui stacked segment">
            <div class="field">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input name="username" placeholder="username" type="text" />
              </div>
            </div>
            <div class="field">
              <div class="ui left icon input">
                <i class="lock icon"></i>
                <input name="password" placeholder="Password" type="password" />
              </div>
            </div>
            <div class="ui fluid large teal submit button">登录</div>
          </div>
          <div class="ui error message"></div>
          <div class="ui negative mini message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名密码错误提示</div>
        </form>
        <button class="ui message">New to us?<a href="#root"> Sign Up</a></button>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  $('.ui.form').form({
    fields: {
      username: {
        identifier: 'username',
        rules: [{
          type: 'empty',
          prompt: '请输入用户名！'
        }]
      },
      password: {
        identifier: 'password',
        rules: [{
          type: 'empty',
          prompt: '请输入密码！'
        }]
      }
    }
  })
</script>
</html>